
<!doctype html>
<html>
<head>
    <title>Github Issues</title>
    <meta charset="utf8">
    <link href="http://jaredly.github.io/github-issues-viewer/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="http://jaredly.github.io/github-issues-viewer/build.css" rel="stylesheet">
    <link href="https://rawgit.com/regularjs/regular/master/example/pager/pager.css" rel="stylesheet">
    <style>
    .labels--vertical .labels__label {
        float: left;
    }
    </style>
</head>
<body>
    <div id="main">

    </div>

<script id="viewer" name="viewer" type="template/regular">
<div class="issue-viewer" >
    <div class="repo-input">
        <span class="repo-input__title" >View Issues From</span>
        <input placeholder="owner/repo" r-model="{{repo}}" on-enter={{this.load()}}>
        <button on-click={{this.load()}} disabled={{!isValidRepo}}>load</button>
    </div>
    <div class="main-view">
        <div class="page all-issues-page">
            <div class="mypager">
                <pager current={{current}} total={{Math.floor(issues.length/30)+1}} />
            </div>
            <ul class="issue-list">
            {{#list this.getCurrentList() as issue}}
                <issue issue={{@(issue)}} />
             {{/list}}
            </ul>
            <div class="mypager">
                <pager current={{current}} total={{Math.floor(issues.length/30)}} />
            </div>
        </div>
    </div>
</div>
</script>
<script id="issue" type="template/regular" name="issue">
    <li class="issue-list__item">
        <div class="issue">
            <div class="issue__left">
                <a class="issue__header" href="#rails/rails/issue/37622739">
                    <span class="issue__id">{{@(issue.number)}}</span>
                    <span class="issue__title">{{@(issue.title)}}</span>
                </a>
                <labels labels={{@(issue.labels)}} />
                <div class="issue__body" ></div>
            </div>
            <div class="issue__right">
                <a class="issue__user" href="@(issue.user.html_url)">
                    <img class="user__avatar" src={{@(issue.user.avatar_url)}}>
                    <span class="user__login user__login--avatar-right">{{@(issue.user.login)}}</span>
                </a>
                
            </div>
        </div>
    </li>
</script>

<script id="labels" name="labels" type="template/regular">
    <ul class="labels issue__labels labels--vertical">
    {{#list labels as label}}
        <li class="labels__label">
            <a class="label" href="{{label.url}}" style="background-color:#{{label.color}}">{{@(label.name)}}</a>
        </li>
    {{/list}}
    </ul>
</script>


<script id="issue-view" name="issue-view" type="template/regular">
    
</script>

<script id="pager" name="pager" type="template/regular">
    
</script>



<script src="http://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://rawgit.com/regularjs/regular/master/dist/regular.js"></script>
<!-- regularjs pager.js -->
<script src="https://rawgit.com/regularjs/regular/master/example/pager/pager.js"></script>
<script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/reqwest/1.1.0/reqwest.js"></script>

<script>
    var url = "https://api.github.com/repos/rails/rails/issues?page=7"
    // Request Plugin 
    // --------------
    // use reqwest for wrap
    function RequestPlugin(Component){
        Component.implement({
           $request: function(options){
              var self = this;
              var oldsuccess = options.success || function(){}
              options.type = options.type || 'json';
              options.method = options.method || 'get';
              options.success = function(){
                oldsuccess.apply(self, arguments);
                self.$update();
              }
              reqwest(options)
           } 
        })
    }
    // r-markdown directive to convert markdown
    Regular.directive("r-markdown", function(elem, value){
      this.$watch(value, function(nvalue){
        elem.innerHTML = marked(nvalue);
      })
    })

    // The App Enterance
    // ----------------
    var Labels = Regular.extend({
        template: "#labels"
    })
    var Issue = Regular.extend({
        template: "#issue"
    })

    var Viewer = Regular.extend({
        template: '#viewer',
        data: {
            repo: "rails/rails",
            current: 1,
            issues: [],
        },
        init: function(){
            var data = this.data;

            this.syncPage(1);

            this.inject("#main");
        },
        // sync allpage
        syncPage: function(i){
            var self = this;
            this.load(i, function(json){
                if(json && json.length){
                    setTimeout(function(){
                        self.syncPage(++i)
                    },1000)
                }
            });
        },
        load: function(page, callback){
            var data = this.data;
            this.$request({
                url: this._getRepoUrl(page||data.current),
                type: 'json', 
                method: 'get',
                success: function(json){
                    if(json){
                        var index = (page-1) * 30;
                        var last = index + json.length;
                        for(var i = 0; i + index < last; i++ ){
                            data.issues[index + i] = json[i]
                        }
                        callback&&callback(json);
                    }
                }
            })
        },
        getCurrentList: function(){
            var data = this.data;
            var issues = data.issues;
            return issues.slice( (data.current-1) * 30, (data.current) * 30)
        },
        _getRepoUrl: function(page){
            return "https://api.github.com/repos/" + this.data.repo + "/issues?page=" + (page - 1)
        },
    }).use(RequestPlugin).use('timeout');

    new Viewer();

    var routes = {
       "/:owner/:repo/:page": function(owner, repo, page){

       },
       "/:owner/:repo/issue/:number": function(owner, repo , number){

       }
    }
    // var routes = {
    //   '/author': author,
    //   '/books': [books, function() {
    //     console.log("An inline route handler.");
    //   }],
    //   '/books/view/:bookId': viewBook
    // };

    // var router = Router(routes);

    // router.init();
</script>

</body>
</html>
